<template>
  <div>
    <div>
      <el-breadcrumb separator="/" style="margin: 8px;">
        <el-breadcrumb-item>预警结果数据</el-breadcrumb-item>
        <el-breadcrumb-item>算法缺陷预警</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <h3>算法缺陷预警</h3>
      <el-row>
        <el-col>
          <div style="margin-top: 20px;">
            <el-form :inline="true" ref="query">
              <el-form-item label="">
                <h4>模型隐私泄漏风险预警</h4>
              </el-form-item>
              <el-form-item class="leftmargin">
                <el-button type="primary" size="mini" :disabled="oneDisable" @click="sendData1">查询</el-button>
                <el-button type="info" size="mini" @click="handleClean">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col>
          <el-radio-group v-model="oneRadio" class="radio_group" @change="oneRadioChange">
            <el-radio :label="1">人脸识别</el-radio>
            <el-radio :label="2">自动驾驶</el-radio>
          </el-radio-group>
        </el-col>
        <el-col style="padding-left: 20px;">
          <h4>待检测模型文件:<span class="tips_txt">支持上传pt或pth格式文件</span></h4>
        </el-col>
        <el-col>
          <el-upload class="upload-demo" drag accept=".pt, .pth" :show-file-list="false" style="margin-top: 5px;"
            :http-request="uploadSectionFilePicA" :before-upload="beforeAvatarUploadPicA" action="string">
            <template v-if="oneFileName">
              <div class="showName">
                <p>文件名:{{ oneFileName }}</p>
                <el-button size="mini" type="primary" plain style="margin-left: 10px;">重新上传</el-button>
              </div>
            </template>
            <template v-else>
              <el-button type="primary" class="el-upload" icon="el-icon-upload2">选择文件</el-button>
              <div class="el-upload__text" style="margin-top: 10px;">或者把文件拖拽到此区域</div>
            </template>
          </el-upload>
        </el-col>
        <el-col>
          <p v-if="oneSendLoading" class="origintxt">已开始检测,请耐心等待</p>
        </el-col>
        <el-col v-if="oneShowResult != null" style="padding-left: 20px;">
          <p class="greentxt">模型隐私泄漏已评估结束</p>
          <h4 style="margin-top: 8px;">检查结果</h4>
          <el-col style="margin-top: 15px;">
            <p>综合预警分数:</p>
          </el-col>
          <el-col style="margin-top: 15px;">
            <el-table border :data="['']" class="table" style="width: 280px;" align="center" ref="table">
              <el-table-column prop="score" align="center" label="模型隐私泄漏风险评估分数">
                <template slot-scope="scope">
                  {{ oneShowResult.score }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col>
            <p class="tipss">预警分数取值范围[0,100]，预警分数越高说明模型隐私泄露风险越大</p>
          </el-col>
        </el-col>

      </el-row>

      <el-divider></el-divider>
      <el-row>
        <el-col>
          <div style="margin-top: 20px;">
            <el-form :inline="true" ref="query">
              <el-form-item label="">
                <h4>对抗攻击风险预警</h4>
              </el-form-item>
              <el-form-item class="leftmargin">
                <el-button type="primary" size="mini" :disabled="twoDisable" @click="sendData2">查询</el-button>
                <el-button type="info" size="mini" @click="handleClean2">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col>
          <el-radio-group v-model="twoRadio" class="radio_group" @change="twoRadioChange">
            <el-radio :label="3">人脸识别</el-radio>
            <el-radio :label="4">自动驾驶</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="8">
          <h4 style="margin-left:20px">待检测数据:<span class="tips_txt">支持jpg,png格式文件</span></h4>
          <el-upload class="upload-demo" drag accept=".jpg, .png" :show-file-list="false" style="margin-top: 5px;"
            :http-request="uploadSectionFilePicB" :before-upload="beforeAvatarUploadPicA" action="string">
            <template v-if="twoFileName">
              <div class="showName">
                <p>文件名:{{ twoFileName }}</p>
                <el-button size="mini" type="primary" plain style="margin-left: 10px;">重新上传</el-button>
              </div>
            </template>
           <template v-else>
              <el-button type="primary" class="el-upload" icon="el-icon-upload2">选择文件</el-button>
              <div class="el-upload__text" style="margin-top: 10px;">或者把文件拖拽到此区域</div>
            </template>
          </el-upload>
        </el-col>
        <el-col :span="8">
          <h4 style="margin-left:20px">模型文件:<span class="tips_txt">支持h5格式文件</span></h4>
          <el-upload class="upload-demo" drag accept=".h5" :show-file-list="false" style="margin-top: 5px;"
            :http-request="uploadSectionFilePicC" :before-upload="beforeAvatarUploadPicA" action="string">
            <template v-if="threeFileName">
              <div class="showName">
                <p>文件名:{{ threeFileName }}</p>
                <el-button size="mini" type="primary" plain style="margin-left: 10px;">重新上传</el-button>
              </div>
            </template>
            <template v-else>
              <el-button type="primary" class="el-upload" icon="el-icon-upload2">选择文件</el-button>
              <div class="el-upload__text" style="margin-top: 10px;">或者把文件拖拽到此区域</div>
            </template>
          </el-upload>
        </el-col>
        <el-col>
          <p v-if="twoSendLoading" class="origintxt">已开始检测,请耐心等待</p>
        </el-col>
        <el-col v-if="twoShowResult != null" style="padding-left: 20px;">
          <p class="greentxt">对抗攻击风险已评估结束</p>
          <h4 style="margin-top: 8px;">检查结果</h4>
          <el-col style="margin-top: 15px;">
            <p>综合预警分数:</p>
          </el-col>
          <el-col style="margin-top: 15px;">
            <el-table border :data="['']" class="table" style="width: 500px;" align="center" ref="table">
              <el-table-column prop="score" align="center" label="对抗攻击风险评估分数">
                <template slot-scope="scope">
                  {{ twoShowResult.score }}
                </template>
              </el-table-column>
              <el-table-column prop="score" align="center" label="对抗攻击风险评估结果">
                <template slot-scope="scope">
                  {{ twoShowResult.resultStr }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col>
            <p class="tipss">预警分数取值范围[0,100%]，预警分数越高说明图像是对抗样本的风险越大</p>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
  data() {
    return {
      query: {
        deviceNo: '',
        pageNum: 1,
        pageSize: 10
      },
      id:'',
      tableData: [],
      checkResult:null,
      oneFile: null,
      twoFile: null,
      threeFile: null,
      oneFileName: "",
      twoFileName: "",
      oneDisable: true,
      twoDisable: true,
      oneSendLoading: false,
      oneShowResult: null,
      twoSendLoading: false,
      twoShowResult: null,
      threeFileName: "",
      pageTotal: 0,
      oneRadio: '',
      twoRadio: '',

    };
  },
  mounted() {
        this.id = this.$route.query.id;
        if(this.id != '' && this.id != undefined){
          this.getData();
        }
  },
  methods: {
    getData(){
      // 查询详情
      this.$http.fetchGet('api/listOneAlgorithmDefect',{
        id:this.id
      }).then(res=>{
//         {
//     "id": 38,
//     "type": 1,
//     "nameType": 1,
//     "resultPath": "output/uptrigger/gtsrb/output/2024-07-19_745211b23057f1138e8d6eddcb466320.json",
//     "adversarialResult": null
// }
          let checkResult = res;
          this.checkResult = checkResult;
          if(checkResult.adversarialResult == null){
            if(this.checkResult.nameType == 0){
              this.twoSendLoading = true;
              this.twoShowResult = null
              if(this.checkResult.type == 0){
                this.twoRadio = 3;
              }else{
                this.twoRadio = 4;
              }
            }else{
              this.oneSendLoading = true;
              this.oneShowResult = null
              if(this.checkResult.type == 0){
                this.oneRadio = 1;
              }else{
                this.oneRadio = 2;
              }
            }
            return;
          }
          let adversarialResult = JSON.parse(this.checkResult.adversarialResult.replace(/^["']|["']$/g, '').replace('/',''));
          // type 0表示人脸识别，1表示自动驾驶"
          // nameType 0鲁棒性，1表示隐私检测
          if(this.checkResult.nameType == 0){
            this.twoShowResult = {
              score:adversarialResult.risk_score,
              resultStr:adversarialResult.result
            }
            if(this.checkResult.type == 0){
              this.twoRadio = 3;
            }else{
              this.twoRadio = 4;
            }
          }else{
            this.oneShowResult = {
              score:adversarialResult.risk_score
            }
            if(this.checkResult.type == 0){
              this.oneRadio = 1;
            }else{
              this.oneRadio = 2;
            }
          }
      }).catch(err=>{
          // let res =  {
          //     "id": 38,
          //     "type": 1,
          //     "nameType": 1,
          //     "resultPath": "output/uptrigger/gtsrb/output/2024-07-19_745211b23057f1138e8d6eddcb466320.json",
          //     "adversarialResult": null
          // }
          // let checkResult = res;
          // this.checkResult = checkResult;
          // if(checkResult.adversarialResult == null){
          //   if(this.checkResult.nameType == 0){
          //     this.twoSendLoading = true;
          //     this.twoShowResult = null
          //     if(this.checkResult.type == 0){
          //       this.twoRadio = 3;
          //     }else{
          //       this.twoRadio = 4;
          //     }
          //   }else{
          //     this.oneSendLoading = true;
          //     this.oneShowResult = null
          //     if(this.checkResult.type == 0){
          //       this.oneRadio = 1;
          //     }else{
          //       this.oneRadio = 2;
          //     }
          //   }
          //   return;
          // }
                // let checkResult = {
                // 	"id": 1,
                // 	"type": 0,
                // 	"nameType": 0,
                // 	"resultPath": null,
                // 	"adversarialResult": "{\"result\":\"干净样本\",\"risk_score\":\"33.72%\"}"
                // };
                // type 0表示人脸识别，1表示自动驾驶"
                // nameType 0鲁棒性，1表示隐私检测
                // let checkResult = {
                // 	"id": 4,
                // 	"type": 1,
                // 	"nameType": 1,
                // 	"resultPath": "dsadaw.json",
                // 	"adversarialResult": "{\"risk_score\":\"82.62\"}"
                // }
                // //尚不清楚哪个字段是详情的分数和结果 
                // this.checkResult = checkResult;
                // console.log(this.checkResult);
                // let adversarialResult = JSON.parse(this.checkResult.adversarialResult.replace(/^["']|["']$/g, '').replace('/',''));
                // if(this.checkResult.nameType == 0){
                //   this.twoShowResult = {
                //     score:adversarialResult.risk_score,
                //     resultStr:adversarialResult.result
                //   }
                //   if(this.checkResult.type == 0){
                //     this.twoRadio = 3;
                //   }else{
                //     this.twoRadio = 4;
                //   }
                // }else{
                //   this.oneShowResult = {
                //     score:adversarialResult.risk_score
                //   }
                //   if(this.checkResult.type == 0){
                //     this.oneRadio = 1;
                //   }else{
                //     this.oneRadio = 2;
                //   }
                // }
            })

    },
    showalert() {
      this.$alert('已开始检测, 检测时间预计需要3小时, 您可以在列表页面查看检测状态及结果。', '提示', {
        confirmButtonText: '确定'
      });
    },
    uploadSectionFilePicA(param) {
      var fileObj = param.file;
      this.oneFileName = fileObj.name;
      this.oneFile = fileObj;
      if (fileObj != undefined) {
        this.oneRadioChange(this.oneRadio);
      }
    },
    uploadSectionFilePicB(param) {
      var fileObj = param.file;
      this.twoFileName = fileObj.name;
      this.twoFile = fileObj;
      if (fileObj != undefined) {
        this.twoRadioChange(this.twoRadio);
      }
    },
    uploadSectionFilePicC(param) {
      var fileObj = param.file;
      this.threeFileName = fileObj.name;
      this.threeFile = fileObj;
      if (fileObj != undefined) {
        this.twoRadioChange(this.twoRadio);
      }
    },
    beforeAvatarUploadPicA(file) {
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        this.$message.error("上传w文件大小不能超过 200MB");
      }
      return isLt2M;
    },
    oneRadioChange(value) {
      if (value != null && value != '') {
        if (this.oneFileName != null && this.oneFileName != '') {
          this.oneDisable = false;
        }
      }
    },
    twoRadioChange(value) {
      if (value != null && value != '') {
        if (this.twoFileName != null && this.twoFileName != '') {
          if (this.threeFileName != null && this.threeFileName != '') {
            this.twoDisable = false;
          }
        }
      }
    },
    sendData1() {
      this.oneSendLoading = true;
      this.oneShowResult = null;
      var form = new FormData();
      form.append("file", this.oneFile);
      this.oneDisable = true;
      this.showalert();
      if (this.oneRadio == 1) {
        form.append("type", 0);
      } else if (this.oneRadio == 2) {
        form.append("type", 1);
      }
      this.$http.postData("api/sendDrivePrivacyLeakageDetect", form).then(res => {
          this.oneSendLoading = false;
          this.oneDisable = false;
        }).catch(err => {
        });
    },
    showOneResult() {
      this.oneSendLoading = false;
      this.oneDisable = false;
      this.oneShowResult = {
        resultStr: "评估已结束",
        score: 9.5
      };
    },
    handleClean() {
      this.oneRadio = '';
      this.oneSendLoading = false;
      this.oneDisable = true;
      this.oneFileName = '';
      this.oneShowResult = null;
    },
    sendData2() {
      this.twoSendLoading = true;
      this.twoShowResult = null;
      this.twoDisable = true;
      var form = new FormData();
      form.append("model", this.twoFile);
      form.append("image", this.threeFile);
      if (this.twoRadio == 3) {
        form.append("type", 0);
      } else if (this.twoRadio == 4) {
        form.append("type", 1);
      }
      this.showalert();
      this.$http.postData("api/sendFaceRobustDetect", form).then(res => {
          this.twoSendLoading = false;
          this.twoDisable = false;
        }).catch(err => {
          // this.showTwoResult();
        });
    },
    showTwoResult() {
      this.twoSendLoading = false;
      this.twoDisable = false;
      this.twoShowResult = {
        resultStr: "评估已结束",
        score: 9.5
      };
    },
    handleClean2() {
      this.twoRadio = '';
      this.twoSendLoading = false;
      this.twoDisable = true;
      this.twoFileName = '';
      this.threeFileName = '';
      this.twoShowResult = null;
    },

  }
};
</script>

<style scoped>
.common-width {
  width: 200px;
}

.common-select {
  width: 350px;
}

.common-input {
  width: 350px;
}

.small-input {
  width: 225px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.green {
  color: #67c23a;
}

.blue {
  color: #409eff;
}

.origin {
  color: #ff7300;
}

.origintxt {
  color: #ff7300;
  font-size: 15px;
  margin-top: 8px;
}

.greentxt {
  color: #67c23a;
  font-size: 15px;
  margin-top: 8px;
}

.red {
  color: #f56c6c;
}

.leftmargin {
  margin-left: 10px;
}

.radio_group {
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 8px;
}

.tips_txt {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.showName {
  margin-left: 17%;
  margin-top: 23%;
  display: flex;
}
.el-upload{
  height: 30px;
  margin-top: 60px;
}
.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.tipss{
  color: #909399;
  margin-top: 10px;
  font-size: 14px;
}
</style>
